Color Styles in Figma are reusable color definitions that help designers maintain consistent colors across frames, components, screens, and complete design systems. Instead of manually entering the same HEX, RGB, HSL, gradient, or other color values repeatedly, designers can create a Color Style once and reuse it throughout a Figma file or shared library.
For professional Figma learning and practical design-system training, visit JustAcademy Figma Training and Register for Figma Course Demo.
A Color Style is a reusable definition of color-related properties in Figma. It allows the same color treatment to be applied consistently to multiple layers and objects. Color Styles can represent solid fills, strokes, gradients, images, patterns, and shader fills.
For example, instead of applying #2563EB manually to 50 buttons, a designer can create a style named Action/Primary and apply that style to every primary button.
Color Style = A reusable and centrally managed color definition that can be applied to multiple design objects.
Color Styles reduce repetitive work and improve consistency. If the same style is used throughout a design and its definition is updated, objects using that style can receive the updated properties.
A well-organized Color Style can act as a source of truth for a particular visual color treatment. Instead of individual designers choosing slightly different shades, everyone can use the same predefined style.
Color Decision
↓
Color Definition
↓
Color Style
↓
Reusable UI Elements
↓
Components
↓
Screens
↓
Consistent Product Experience
| Raw Color | Color Style |
|---|---|
| Directly entered color value | Reusable named definition |
| Can be repeated manually | Can be reused across objects |
| Harder to maintain at scale | Easier to manage |
| May create duplicates | Encourages consistency |
| Usually lacks semantic meaning | Can communicate intended usage |
Color Styles can be useful in many parts of a Figma design.
A well-designed Color Style usually contains a meaningful name, an optional description, and one or more color-related properties.
| Part | Purpose |
|---|---|
| Name | Identifies the style. |
| Description | Explains intended usage. |
| Color Value | Defines the visual color. |
| Opacity | Controls transparency where applicable. |
| Fill Stack | Allows multiple fill properties in a style. |
| Gradient Properties | Defines gradient colors and direction. |
The name is one of the most important parts of a Color Style because it helps designers understand what the style is intended to represent.
A good name should describe purpose rather than only appearance.
Text/PrimaryText/SecondaryBackground/DefaultAction/PrimaryBorder/DefaultFeedback/SuccessBlueNice BlueDark ColorMy ColorColor 1Semantic naming describes the role of a color instead of its physical appearance.
For example, Action/Primary is more useful than Blue/500 when the color is specifically intended for primary actions.
Appearance-based names describe the visible color itself.
Blue/500
Green/500
Gray/900
Purple/500
These names can be useful for primitive palettes, but they may be less meaningful when describing how a color should be used in a user interface.
Text/Primary
Text/Secondary
Text/Disabled
Background/Default
Background/Subtle
Surface/Card
Border/Default
Action/Primary
Action/Secondary
Feedback/Success
Feedback/Warning
Feedback/Error
Feedback/Info
A description can explain when and where a style should be used. This is particularly useful in shared design systems.
Example description: Use for primary actions such as main call-to-action buttons.
A local style is a style definition that exists inside the current Figma file. Local Color Styles can be reused within that file.
Suppose a product uses #2563EB as its primary brand color.
Style Name:
Action/Primary
Color:
#2563EB
Usage:
Primary buttons and important actions
You can select multiple compatible objects and apply the same Color Style. This is useful when standardizing existing screens.
Select Objects
↓
Open Color Style Picker
↓
Search Style
↓
Select Style
↓
All Selected Objects Use the Same Style
A Color Style can be edited when its definition needs to change. For example, if the primary brand color changes, the corresponding style can be updated instead of manually changing every object.
Old Style
Action/Primary = #2563EB
↓
Update Style
↓
Action/Primary = New Color
↓
Objects Using the Style
↓
Updated Visual Appearance
Detaching a style removes the connection between the object and the style while preserving the current visual properties. After detaching, changes to the original style will no longer update that object through the detached style connection.
Color Styles can be used with fill properties. This makes them useful for backgrounds, cards, buttons, containers, illustrations, and many other objects.
Color Styles can also be used for strokes. This is useful for borders, outlines, separators, icons, illustrations, and form controls.
| Property | Example Usage |
|---|---|
| Fill | Button background |
| Fill | Card background |
| Fill | Text color |
| Stroke | Input border |
| Stroke | Card outline |
| Stroke | Icon outline |
The simplest Color Style contains a solid color. A solid Color Style may be used for backgrounds, text fills, icons, borders, buttons, and other UI elements.
Text/Primary
#111827
Background/Default
#FFFFFF
Action/Primary
#2563EB
Text can use Color Styles to maintain consistent typography colors across a product.
Text/Primary
Text/Secondary
Text/Tertiary
Text/Disabled
Text/Inverse
Text/Link
The primary text color is normally used for important content such as headings, labels, and main body content.
Secondary text can be used for supporting information, descriptions, metadata, and less prominent content.
Disabled text should communicate that an element is temporarily unavailable while maintaining sufficient visual clarity for the intended context.
Inverse text is useful when text appears on a dark or strongly colored background.
A dedicated link style can provide consistent visual treatment for hyperlinks across the product.
Text/Link
Text/Link-Hover
Text/Link-Visited
Background styles define colors for page backgrounds, sections, containers, and other large surfaces.
Background/Default
Background/Subtle
Background/Muted
Background/Brand
Background/Dark
Surface colors are useful for cards, panels, modals, dropdowns, sheets, and other UI surfaces that sit above a page background.
Surface/Default
Surface/Raised
Surface/Sunken
Surface/Overlay
Border styles create consistency across inputs, cards, separators, tables, and other outlined components.
Border/Default
Border/Subtle
Border/Strong
Border/Focus
Border/Error
Icons often need consistent colors based on their role and state.
Icon/Primary
Icon/Secondary
Icon/Disabled
Icon/Inverse
Icon/Brand
Icon/Error
Action styles define colors for interactive elements such as buttons and important controls.
Action/Primary
Action/Secondary
Action/Tertiary
Action/Danger
Hover states can use dedicated colors when a design system requires a visually distinct interaction state.
Action/Primary
Action/Primary-Hover
Action/Primary-Pressed
Action/Primary-Disabled
Focus colors are useful for keyboard navigation and accessible interaction states.
Border/Focus
Focus/Ring
Success colors communicate successful operations, completed actions, valid states, or positive feedback.
Feedback/Success
Feedback/Success-Background
Feedback/Success-Text
Feedback/Success-Icon
Warning colors communicate conditions that require attention but are not necessarily errors.
Feedback/Warning
Feedback/Warning-Background
Feedback/Warning-Text
Feedback/Warning-Icon
Error colors communicate invalid input, failed operations, destructive actions, or critical problems.
Feedback/Error
Feedback/Error-Background
Feedback/Error-Text
Feedback/Error-Icon
Information colors can communicate neutral informational messages, tips, or system announcements.
Feedback/Info
Feedback/Info-Background
Feedback/Info-Text
Feedback/Info-Icon
Disabled states can have dedicated styles for text, icons, borders, and backgrounds.
Text/Disabled
Icon/Disabled
Border/Disabled
Background/Disabled
Overlay styles can be used for modal backdrops, drawers, dialogs, menus, and other layers placed above the main interface.
Overlay/Scrim
Overlay/Light
Overlay/Dark
Opacity controls how transparent a color appears. It can be useful for overlays, subtle backgrounds, disabled states, and layered visual effects.
Color:
#000000
Opacity:
40%
Figma styles can contain combinations of values. A Color Style can use multiple fill properties arranged as a stack, allowing more complex visual treatments than a single flat color.
Top Fill
↓
Transparent / Semi-transparent Fill
↓
Base Fill
↓
Final Visual Appearance
Color Styles can store gradients. A gradient style can preserve the colors used in the gradient along with its direction or angle.
A linear gradient transitions between colors along a straight direction.
Gradient:
#2563EB → #7C3AED
Direction:
Left → Right
Style:
Brand/Gradient
A radial gradient spreads colors outward from a central point. It can be useful for hero sections, illustrations, backgrounds, and decorative effects.
An angular gradient changes color around a central point in an angular direction and can be useful for special visual effects and illustrations.
A diamond gradient creates a diamond-shaped transition and can be used for decorative UI and visual compositions.
When creating a gradient style, the visual result depends not only on the colors but also on the direction and angle of the gradient. A well-defined style preserves the intended visual treatment.
Gradient styles should communicate their purpose rather than only listing colors.
Brand/Gradient
Hero/Gradient
Card/Gradient
Marketing/Gradient
Accent/Gradient
Figma Color Styles can also represent image-related fill properties. This can be useful when a design system needs a reusable image treatment or predefined visual property.
Pattern-based visual treatments can also be represented through styles where supported. This helps maintain consistent decorative patterns across designs.
Figma also supports shader fill styles. These can be useful for advanced visual treatments and more expressive graphical designs.
Color Styles become especially powerful when combined with components. A button component can use a Color Style for its background, text, icon, and border so that its visual system remains consistent.
Color Styles
↓
Button Component
↓
Button Instances
↓
Multiple Screens
A design system can use Color Styles to establish consistent visual rules across products and screens. A strong color system normally separates raw palette decisions from semantic usage decisions.
Primitive colors are basic palette values such as brand shades, neutral shades, and accent shades.
Brand/Blue/100
Brand/Blue/200
Brand/Blue/300
Brand/Blue/400
Brand/Blue/500
Brand/Blue/600
Brand/Blue/700
Semantic colors describe how a color is used in the interface.
Text/Primary
Text/Secondary
Background/Default
Action/Primary
Feedback/Error
| Primitive | Semantic |
|---|---|
| Blue/500 | Action/Primary |
| Gray/900 | Text/Primary |
| Gray/100 | Background/Subtle |
| Red/500 | Feedback/Error |
Color System
├── Brand
│ ├── Primary
│ ├── Secondary
│ └── Accent
├── Text
│ ├── Primary
│ ├── Secondary
│ └── Disabled
├── Background
│ ├── Default
│ ├── Subtle
│ └── Dark
├── Border
│ ├── Default
│ ├── Strong
│ └── Focus
├── Action
│ ├── Primary
│ ├── Secondary
│ └── Danger
└── Feedback
├── Success
├── Warning
├── Error
└── Info
Slash-based naming can help organize related styles into groups.
Text/Primary
Text/Secondary
Text/Disabled
Background/Default
Background/Subtle
Action/Primary
Action/Secondary
A brand color system defines the colors that represent the visual identity of a product or organization.
Brand/Primary
Brand/Secondary
Brand/Accent
Brand/Gradient
Neutral colors are commonly used for text, surfaces, backgrounds, borders, and supporting UI elements.
Neutral/White
Neutral/50
Neutral/100
Neutral/200
Neutral/300
Neutral/500
Neutral/700
Neutral/900
Neutral/Black
A color scale provides multiple shades of a color so designers can select appropriate levels of emphasis.
Blue/50
Blue/100
Blue/200
Blue/300
Blue/400
Blue/500
Blue/600
Blue/700
Blue/800
Blue/900
A primary scale can support buttons, links, active states, highlights, and other brand-related elements.
A neutral scale is particularly important because many UI elements depend on neutral colors for backgrounds, text, borders, and surfaces.
Color Styles should be designed with accessibility in mind. A style itself does not automatically guarantee accessible contrast. Designers should check whether foreground and background combinations provide sufficient contrast for their intended use.
Important combinations such as body text and background, button text and button background, and form labels should be checked for adequate contrast.
Do not communicate important information using color alone. Combine color with text, icons, shapes, labels, or other visual indicators when appropriate.
Color should have a consistent meaning throughout a product. For example, if red represents destructive or error states, using red for unrelated positive actions can create confusion.
Color Styles can participate in theme-based design systems, but when a design needs multiple contextual values such as Light and Dark modes, Figma Variables are generally better suited because variables support modes.
Color Styles and Color Variables can work together. Figma allows color variables to be applied to color styles, including solid colors and gradient stops.
| Color Style | Color Variable |
|---|---|
| Stores reusable style properties | Stores reusable raw values |
| Can support composite values | Represents a single value at a time |
| Can represent gradients | Can represent color values and modes |
| Useful for visual treatments | Useful for tokens and theming |
| No variable-style aliasing model | Supports variable aliasing |
| Does not provide variable modes itself | Supports multiple modes |
Primitive Color Variables
↓
Semantic Color Variables
↓
Color Styles
↓
Components
↓
Screens
Design tokens are reusable design values that help connect design decisions with implementation. In modern Figma systems, variables are often useful for token structures, while styles remain useful for composite visual properties such as gradients and multiple fills.
A button can use separate Color Styles for different visual properties.
Button Background:
Action/Primary
Button Text:
Text/On-Primary
Button Border:
Border/Primary
Button Icon:
Icon/On-Primary
Action/Primary
Action/Primary-Hover
Action/Primary-Pressed
Action/Primary-Focus
Action/Primary-Disabled
Card Background:
Surface/Default
Card Border:
Border/Default
Card Title:
Text/Primary
Card Description:
Text/Secondary
Input/Background
Input/Border
Input/Border-Focus
Input/Text
Input/Placeholder
Input/Error
Input/Success
Navigation/Background
Navigation/Text
Navigation/Text-Active
Navigation/Icon
Navigation/Icon-Active
Navigation/Border
Dashboards commonly need consistent colors for cards, metrics, charts, filters, navigation, statuses, and alerts.
Dashboard/Background
Dashboard/Card
Dashboard/Text
Dashboard/Primary
Dashboard/Success
Dashboard/Warning
Dashboard/Error
Ecommerce/Price
Ecommerce/Discount
Ecommerce/Add-to-Cart
Ecommerce/Out-of-Stock
Ecommerce/Success
Ecommerce/Rating
Published libraries can allow teams to reuse shared styles across files. This is especially useful when a company maintains a centralized design system.
Design System File
↓
Create Color Styles
↓
Review
↓
Publish Library
↓
Enable Library in Product File
↓
Use Shared Color Styles
↓
Update Central Style
↓
Maintain Consistency
Publishing allows styles from a source file to be made available through a shared library for eligible team workflows. Library publishing and access depend on the Figma plan and permissions.
When a source library style is changed, the updated style can be published so consuming files can receive the library update according to their workflow and update controls.
A professional design system should define who can create, review, publish, modify, and deprecate shared Color Styles.
Documentation should explain what each style means, where it should be used, and which UI elements should use it.
| Style | Purpose | Example Usage |
|---|---|---|
| Text/Primary | Main content | Headings and body text |
| Text/Secondary | Supporting content | Descriptions |
| Action/Primary | Main action | Primary button |
| Feedback/Error | Error communication | Validation message |
| Background/Default | Main surface | Page background |
A Color Style audit checks whether the existing styles are useful, consistent, correctly named, and still required.
Creating a separate style for every small shade can make a design system difficult to understand. Establish a controlled palette and create styles based on meaningful usage.
Two styles may contain the same visual value but have different names. Regular audits can help identify unnecessary duplication.
Names such as Blue1, Blue2, and ColorFinal do not communicate intended usage effectively.
A style named Blue can become confusing if the brand changes from blue to purple. Semantic names such as Action/Primary communicate purpose more effectively.
Repeatedly entering HEX values manually can introduce inconsistencies. Use reusable styles or variables where appropriate.
Do not select colors only because they look attractive. Check contrast, readability, interaction states, and usability.
Both features are powerful, but a design system should define when to use Color Styles and when to use Color Variables. This avoids duplicate systems and confusion.
Even a technically correct color library can become difficult to use if designers do not know what each style means or where it should be applied.
Brand/Primary
Brand/Secondary
Text/Primary
Text/Secondary
Text/Disabled
Background/Default
Background/Subtle
Surface/Default
Surface/Raised
Border/Default
Border/Strong
Action/Primary
Action/Secondary
Action/Danger
Feedback/Success
Feedback/Warning
Feedback/Error
Feedback/Info
Create a complete Color Style system for an e-commerce application.
Create a dashboard design containing navigation, metric cards, charts, filters, tables, status badges, and alerts. Build reusable Color Styles for each semantic role.
For a light and dark interface, define reusable Color Variables with modes and use styles where composite or gradient treatments are required. This creates a more scalable theme architecture.
Color Variables
├── Light Mode
│ ├── Background
│ ├── Surface
│ └── Text
└── Dark Mode
├── Background
├── Surface
└── Text
↓
Color Styles / Components
↓
Application Screens
Audit Existing Colors
↓
Define Brand Palette
↓
Create Neutral Palette
↓
Define Semantic Roles
↓
Choose Styles vs Variables
↓
Create Color Definitions
↓
Name and Organize Styles
↓
Add Descriptions
↓
Apply to Components
↓
Check Accessibility
↓
Publish to Library
↓
Document and Maintain
| Concept | Meaning |
|---|---|
| Color Style | Reusable color-related style definition |
| Local Style | Style available within the current file |
| Shared Style | Style distributed through a library |
| Semantic Name | Name based on intended usage |
| Gradient Style | Reusable gradient treatment |
| Style Description | Explanation of intended usage |
| Color Variable | Reusable color value that can support modes |
| Style Library | Shared collection of reusable styles |
A Color Style is a reusable color-related definition that can be applied to multiple design objects.
They improve consistency, reduce repetitive work, simplify maintenance, and support scalable design systems.
Yes. Color Styles can be used for stroke properties as well as fills.
Yes. Color Styles can represent gradients, including the colors and gradient direction or angle.
A Color Style is useful for reusable visual style properties and composite treatments, while a Color Variable stores a reusable color value and can support multiple modes and aliasing.
Yes. Figma supports applying color variables to Color Styles, including gradient stops.
Semantic naming describes the purpose or role of a color, such as Action/Primary or Text/Secondary, rather than only describing its appearance.
A local Color Style is a style definition stored in the current Figma file.
Descriptions explain the intended usage of a style and help other designers select the correct style.
Variables are particularly useful when a design system needs modes, themes, token relationships, or variable aliasing.
A shared style library makes reusable styles available to other files and team members according to the library and permission setup.
Auditing helps identify duplicates, unused styles, inconsistent naming, accessibility problems, and outdated definitions.
Color Styles are an important part of creating organized and scalable designs in Figma. They allow designers to convert repeated color decisions into reusable, meaningful design-system definitions. By using semantic names, descriptions, organized groups, consistent application, accessibility checks, and shared libraries, teams can build interfaces that are easier to maintain and scale.
For advanced Figma learning and practical design-system skills, explore JustAcademy Figma Training and Register for Figma Course Demo.
